<template>
    <div class="home" style="height: 100vh;">
        <el-container style="height: 100vh;">
            <el-aside :width="sideWidth+'px'"
                      style="background-color: rgb(238, 241, 246);height: 100%;box-shadow: 2px 0 6px rgba(0,21,41,.35);">
                <Aside :isCollapse="isCollapse" :logoTextShow="logoTextShow"/>
            </el-aside>

            <el-container>
                <el-header style="font-size: 12px;border-bottom: 1px solid #ccc;line-height: 60px">
                    <Header :collapseBtnClass="collapseBtnClass" @collapse="collapse"/>
                </el-header>
                <div class="app-wrapper">
                    <div class="drawer-bg" @click="handleClickOutside" />
                    <!-- 左侧侧边栏菜单 -->
                    <div class="main-container">
                        <div>
                            <!--多页签导航栏-->
                            <tags-view v-if="needTagsView" />
                        </div>
                    </div>
                </div>
                <el-main>
                    <router-view/>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    import Aside from '../components/Aside'
    import Header from '../components/Header'
    import TagsView from '@/components/TabsView'

    export default {
        name: 'Manage',
        components: {Aside, Header, TagsView},
        data() {
            return {
                menuList: [],
                collapseBtnClass: 'el-icon-s-fold',
                isCollapse: false,//是否隐藏导航栏
                sideWidth: 200,//隐藏后导航栏的宽度
                logoTextShow: true,//是否隐藏项目名称
                editableTabsValue: '2',
                editableTabs: [{
                    title: 'Tab 1',
                    name: '1',
                    content: 'Tab 1 content'
                }, {
                    title: 'Tab 2',
                    name: '2',
                    content: 'Tab 2 content'
                }],
                tabIndex: 2
            }
        },
        methods: {
            handleClickOutside() {
                this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
            },
            collapse() {
                this.isCollapse = !this.isCollapse
                if (this.isCollapse) { //隐藏导航栏
                    this.logoTextShow = false
                    this.sideWidth = 64
                    this.collapseBtnClass = "el-icon-s-unfold"
                } else {
                    this.logoTextShow = true
                    this.sideWidth = 200
                    this.collapseBtnClass = "el-icon-s-fold"
                }
            },
        },
        computed: {
            needTagsView() {
                return true
            },
        },
    }
</script>
<style scoped>

</style>
